<template>
    <!-- 管理员后台人员管理下的:员工评价 -->
    <div class="container">

        <div class="search">
            <el-input v-model="timeSearch" placeholder="请输入评价时间~"></el-input>
            <el-input v-model="employeeSearch" placeholder="请输入受评人~"></el-input>
            <el-input v-model="olderSearch" placeholder="请输入评价人~"></el-input>
        </div>

        <div  class="table-data">
            <el-table
                :data="tableData"
                style="width: 100%"
                height="100%"
                >
                <el-table-column
                    label="评价时间"
                    width="140"
                    prop="create_time"
                    sortable
                    >
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
                        </template>
                </el-table-column>

                <el-table-column
                    label="受评人(员工)"
                    width="120">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                            <p>姓名: {{ scope.row.employee_name }}</p>
                            <p>电话: {{ scope.row.employee_phone }}</p>
                            <p>地址: {{ scope.row.employee_address }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.employee_name }}</el-tag>
                            </div>
                            </el-popover>
                        </template>
                </el-table-column>

                
                <el-table-column
                    label="评价人(老人)"
                    width="120">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                            <p>姓名: {{ scope.row.older_name }}</p>
                            <p>电话: {{ scope.row.older_phone }}</p>
                            <p>地址: {{ scope.row.older_address }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.older_name }}</el-tag>
                            </div>
                            </el-popover>
                        </template>
                </el-table-column>

                <el-table-column
                    label="评分"
                    prop="grade"
                    width="180"
                    sortable>

                    <template slot-scope="scope">
                        <el-rate
                            v-model="scope.row.grade"
                            disabled
                            show-score
                            text-color="#ff9900"
                            score-template="{value}">
                        </el-rate>
                    </template>
                </el-table-column>

                <el-table-column
                    label="评价情况"
                    prop="is_grade"
                    width="110"
                    >
                    <template slot-scope="scope">
                        <el-tag
                            v-show="scope.row.is_grade !== 'N'"
                            type="success"
                            effect="dark">
                            已评价
                        </el-tag>
                        <el-tag
                            v-show="scope.row.is_grade === 'N'"
                            type="info"
                            effect="dark">
                            未评价
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                prop="context"
                label="附加消息"
                show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </div>
     
    </div>
</template>

<script>
    import myAxios from '@/tools/myAxios';
    export default {
        name:'CommentManage',
        data() {
            return {
                // 评价信息数据(展示所用)
                tableData: [],
                // 评价信息数据(存放数据)
                alltableDate:[],
                // 通过时间查询
                timeSearch:'',   
                // 通过员工姓名查询    
                employeeSearch: '',
                // 通过老人姓名查询
                olderSearch:''     
            }
        },
        watch:{
            timeSearch(newValue){
                this.tableData = this.alltableDate.filter((item) => {
                    return item.create_time.indexOf(newValue) !== -1;
                })
            },
            employeeSearch(newValue){
                this.tableData = this.alltableDate.filter((item) => {
                    return item.employee_name.indexOf(newValue) !== -1;
                })
            },
            olderSearch(newValue){
                this.tableData = this.alltableDate.filter((item) => {
                    return item.older_name.indexOf(newValue) !== -1;
                })
            },
        },
        mounted(){
            myAxios(
                'http://localhost:8088/admin/getemployeeoldercomment',
                'get',
                null,
                (data)=>{
                    if(data.length === 0){
                        // 提示一下
                        this.$message({
                            message: '评价信息为空!',
                            type: 'warning'
                        });
                    }else{
                        this.alltableDate = data;
                        this.tableData = data;
                    }
                }
            )
        }

    }
</script>

<style lang="less" scoped>
.container{
    width: 97%;
    height: 660px;
    background-color: rgb(255, 255, 255);
    padding: 15px;
    border-radius: 15px;

    .search{
        display: flex;
        justify-content: center;
        align-items: center;
        .el-input{
            width: 30%;
            margin-right: 20px;
        }
    }

    .table-data{
        width: 100%;
        height: 94%;
        overflow: auto;
    }
}
</style>